<template>
  <!--  出库记录-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.queryString" clearable placeholder="单号/说明/收货地址/项目名称">
        <template slot="prepend">查询条件</template>
      </el-input>
      <el-select v-model="form.orderStatus" style="width: 150px;" clearable placeholder="出库状态">
        <el-option
          v-for="item in EnumOutOrderStatusSelectList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.orderType" style="width: 150px;" clearable placeholder="出库类型">
        <el-option
          v-for="item in EnumOutOrderTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.companyId" clearable filterable placeholder="请选择客户或供应商公司">
        <el-option
          v-for="item in allCompanyList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-date-picker
        clearable
        style="min-width:400px;height: 40px"
        value-format="timestamp"
        v-model="timerArray"
        type="daterange"
        range-separator="至"
        start-placeholder="出库开始日期"
        end-placeholder="出库结束日期">
      </el-date-picker>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="iconfont iconshoudongchuku icon_size_15" class="common_btn-small" @click="addOrder()">填写出库单
      </el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="单号" width="175"></el-table-column>
        <el-table-column prop="orderType" label="出库类型" width="125">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderType| gradeGoodsEnumColor" size="mini">
              {{scope.row.orderTypeName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" show-overflow-tooltip label="出库状态" width="110">
          <template slot-scope="scope">
            <el-tag :style="scope.row.orderStatus| gradeInOrderStatusColor" style="color: white" size="mini">
              {{scope.row.orderStatusName}}
            </el-tag>
            <p style="font-size: 10px;color: #a3a3a3;" v-if="scope.row.orderStatus === 4">
              原因：{{scope.row.rejectExplanation}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="fromUserName" show-overflow-tooltip label="填写人员" width="100"></el-table-column>
        <el-table-column prop="createTime" label="填写时间" width="170">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="toUserName" label="出库人员" show-overflow-tooltip  width="100"></el-table-column>
        <el-table-column prop="toTime" label="出库日期" width="120">
          <template slot-scope="scope">{{scope.row.toTime | formatTimer2}}</template>
        </el-table-column>
        <el-table-column prop="explanation" label="出库说明" show-overflow-tooltip min-width="100"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"  min-width="100"></el-table-column>
        <el-table-column label="操作" fixed="right" min-width="150">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row,true,false,false)">查看详情</button>
            <button class="btn_add" @click="handleEdit(scope.row,false,false,false)" v-if="scope.row.orderStatus !== 3">
              编辑
            </button>
            <button class="btn_add" @click="handleEdit(scope.row,true,true,false)" v-if="scope.row.orderStatus !== 3">
              出库确认
            </button>
            <button class="btn_print" v-if="scope.row.orderStatus===3" @click="orderPrint(scope.row,'出库单')">打印出库单
            </button>
            <button class="btn_print"
                    v-if="scope.row.orderStatus===3&&(scope.row.orderType===1||scope.row.orderType===4)"
                    @click="orderPrint(scope.row,'发货单')">打印发货单
            </button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
      <!--打印表单弹窗-->
      <el-drawer
        :title="orderHeaderName"
        :visible.sync="isShowPrintDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="40%">
        <div class="demo-drawer__content" style="overflow: auto;height: 80%">
          <div class="box" id="printJS-form">
            <print-form ref="printForms"></print-form>
          </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowPrintDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class="common_btn-defalut" @click="printOrder">确 定</el-button>
        </div>
      </el-drawer>
      <!--  出库单填写-->
      <el-drawer
        :title="dialogTitle + '单'"
        :visible.sync="isShowAddDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="60%">
        <div class="demo-drawer__content">
          <div class="goods_compose_class">
            <el-form label-position="right" ref="order" label-suffix="：" :rules="rule" :model="order"
                     label-width="90px">
              <!--  编辑时不能修改    -->
              <el-form-item prop="goodsEnum" label="出库类型">
                <el-radio-group v-model="order.orderType" @change="getOrderSelectList" :disabled="isLook">
                  <el-radio-button v-for="item in EnumOutOrderTypeList" :key="item.code" :label="item.code">
                    {{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <!-- 选择相应的订单,编辑时不能更改-->
              <el-form-item prop="parentOrderId" label-width="100px" :label="orderTitle">
                <el-select v-model="order.parentOrderId" filterable :filter-method="orderFilter"
                           :disabled="isLook"
                           placeholder="可通过搜索快速匹配信息"
                           @change="changeOrder">
                  <el-option-group
                    v-for="group in filterOrderList"
                    :key="group.companyName"
                    :label="group.companyName">
                    <el-option
                      v-for="item in group.orderList"
                      :key="item.id"
                      :label="item.orderNo"
                      :value="item.id">
                      <span style="float: left">{{ item.orderNo }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px;">{{item.explanation}}</span>
                    </el-option>
                  </el-option-group>
                </el-select>
                <template v-if="order.orderType === 1 || order.orderType === 4">
                  <el-alert
                    :closable="false" title="销售出库必须选择销售订单，可快速匹配发货信息！" type="info" show-icon>
                  </el-alert>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item prop="companyName" label="购货单位">
                        <el-input v-model="order.companyName" size="mini" disabled></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item prop="userName" label="业务员">
                        <el-input v-model="order.userName" size="mini" disabled></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item prop="projectName" label="项目名称">
                    <el-input v-model="order.projectName" size="mini" disabled></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="6">
                      <el-form-item prop="consigneeName" label="收货人" style="margin-bottom: 5px;">
                        <el-input :disabled="isLook" size="small" v-model="order.consigneeName" style="width: 90%"
                                  placeholder="请输入姓名"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item prop="consigneePhone" label="电话" style="margin-bottom: 5px;">
                        <el-input :disabled="isLook" size="small" v-model="order.consigneePhone" style="width: 80%"
                                  placeholder="请输入电话"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="address" label="收货地址" label-width="100px" style="margin-bottom: 5px;">
                        <el-input :disabled="isLook" size="small" v-model="order.address" style="width:91%"
                                  placeholder="请输入收货地址"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
              </el-form-item>
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="toTime" label="出库日期" label-width="100px">
                    <el-date-picker
                      @change="dataChange"
                      :disabled="isLook"
                      v-model="order.toTime"
                      type="date"
                      style="width: 100%;"
                      placeholder="选择出库日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="fromUserName" label="填写人员">
                    <el-input disabled v-model="order.fromUserName"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item prop="explanation" label="备注">
                <el-input :disabled="isLook" v-model="order.explanation"
                          placeholder="请输入出库补充说明"></el-input>
              </el-form-item>
              <el-button icon="el-icon-plus" type="primary" @click="addGoodsCompose"
                         v-if="order.orderType !== 1 && order.orderType !== 4"
                         :disabled="isLook || order.parentOrderId.length > 0 ">添加货品
              </el-button>
              <el-table height="35vh" border :data="order.formationListTemp" class="m-t-24">
                <el-table-column label="名称" min-width="250px" key="名称">
                  <template slot-scope="scope">
                    <el-select size="small" value-key="id" :disabled="isLook || order.parentOrderId.length > 0"
                               v-model="scope.row.formation" filterable
                               placeholder="请选择货品"
                               clearable>
                      <el-option
                        v-for="item in goodsSelectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item"
                        :disabled="disableGoodsSelect.indexOf(item.id) !== -1">
                        <span style="float: left">{{ item.name }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.specifications }}</span>
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="类型" min-width="100px" key="类型">
                  <template slot-scope="scope">
                    {{scope.row.formation?scope.row.formation.goodsEnumName:'---'}}
                  </template>
                </el-table-column>
                <el-table-column label="分类" min-width="100px" key="分类" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.formation?scope.row.formation.goodsTypeName:'---'}}
                  </template>
                </el-table-column>
                <el-table-column label="规格" min-width="100px" key="规格">
                  <template slot-scope="scope">
                    {{scope.row.formation?scope.row.formation.specifications:'---'}}
                  </template>
                </el-table-column>
                <el-table-column label="待出库数量" width="110px" v-if="order.parentOrderId.length > 0 " key="待出库数量">
                  <template slot-scope="scope">
                    <span
                      v-if="scope.row.formation  && scope.row.formation.maxNumber">{{scope.row.formation.maxNumber}}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
                <el-table-column label="出库数量" min-width="155px" key="出库数量">
                  <template slot-scope="scope">
                    <el-input-number size="small" v-if="scope.row.formation"
                                     :disabled="isLook"
                                     v-model="scope.row.formation.formationNumber"
                                     :min="1"
                                     style="width: 90%"
                                     :max="scope.row.formation.maxNumber?scope.row.formation.maxNumber:10000"></el-input-number>
                    <span v-else>---</span>
                  </template>
                </el-table-column>
                <el-table-column label="货架" min-width="100px" show-overflow-tooltip key="货架">
                  <template slot-scope="scope">
                    {{scope.row.formation?scope.row.formation.shelvesName:'---'}}
                  </template>
                </el-table-column>
                <el-table-column label="货位" min-width="100px" show-overflow-tooltip key="货位">
                  <template slot-scope="scope">
                    {{scope.row.formation?scope.row.formation.goodsAllocationName:'---'}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="90" v-if="!isLook" key="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      class="btn_delete"
                      @click="handleDeleteImg(scope.$index)">删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

              <template v-if="order.isConfirm || (isLook && order.orderStatus > 2)">
                <el-row>
                  <el-col :span="7">
                    <el-form-item prop="goodsEnum" label="出库确认状态" label-width="130px">
                      <el-radio-group :disabled="!order.isConfirm" v-model="orderConfirm.orderStatus">
                        <el-radio-button v-for="item in outOrderStatusList" :key="item.code" :label="item.code">
                          {{item.name}}
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item prop="toUserName" label="出库人员">
                      <el-input :disabled="isLook" v-model="order.toUserName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item prop="explanation" label="说明" v-if="orderConfirm.orderStatus === 4">
                      <el-input :disabled="!order.isConfirm" v-model="orderConfirm.explanation"
                                placeholder="出库情况说明"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

              </template>
            </el-form>
          </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowAddDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class="common_btn-defalut" @click="validateAddForm">确 定</el-button>
        </div>
      </el-drawer>
    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
import {
  getOutOrderList,
  addOutOrder,
  confirmOutOrder,
  updateOutOrder,
  getOutOrderSelectList,
} from '@/services/ERP/order'
import ItemMixins from "../item.mixins";
import XLoading from '@/components/animation/x-loading.vue'
import PrintForm from '@/components/print/index'
import Format from '@/utils/format'
import Enums from '@/utils/enums'

// form表单校验规则
export default {
  components: {XLoading, PrintForm},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      text: '请输入',
      purchaseData: {},
      purchase_item: [],
      timerArray: [],
      isShowPrintDialog: false,
      orderHeaderName: '',
      toTime:'',
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      rule: {
        consigneeName: {required: true, message: '请填写联系人'},
        consigneePhone: {required: true, message: '请填写联系电话'},
        address: {required: true, message: '请填写收货地址'},
        toTime: {required: true, message: '请选择出库日期'},
      },
      order: {
        goodsList: [],
        parentOrderId: ''
      },
      orderConfirm: {},
      tableList: [],
      orderList: [],
      EnumOutOrderTypeList: [],
      EnumOutOrderStatusList: [],
      outOrderStatusList: [
        {name: '已出库', code: 3},
        {name: '未出库', code: 4},
      ],
      isShowAddDialog: false,
      isLoading: false,
    }
  },
  computed: {
    filterOrderList() {
      if (!this.orderFilterString) {
        return this.orderList
      }
      let list = []
      //匹配包含字符的选项
      this.orderList.map(x => {
        let orderList = []
        //选项集相关字段包含过滤字符的选项
        for (let i = 0; i < x.orderList.length; i++) {
          let y = x.orderList[i]
          if (y.companyName.indexOf(this.orderFilterString) !== -1 || y.explanation.indexOf(this.orderFilterString) !== -1 || y.orderNo.indexOf(this.orderFilterString) !== -1) {
            orderList.push(y)
          }
        }
        //有选项集包含的将选项加入 列表中
        if (orderList.length > 0) {
          let option = JSON.parse(JSON.stringify(x))
          option.orderList = orderList
          list.push(option)
        }
      })
      return list
    },
    EnumOutOrderStatusSelectList() {
      return this.EnumOutOrderStatusList.filter(x => x.code !== 2)
    },
    isEdit() {
      return this.order.id?.length > 0
    },
    isLook() {
      return this.order.isLook
    },
    //手动出库货品选项
    goodsSelectList() {
      let list = []
      //销售出库只能选产品
      if (this.order.orderType === 1 || this.order.orderType === 4) {
        list = this.allGoodsSelectList.filter(x => x.goodsEnum === 3)
        //生产领料出库不能选产品
      } else if (this.order.orderType === 2) {
        list = this.allGoodsSelectList.filter(x => x.goodsEnum !== 3)
        //采购退货
      } else if (this.order.orderType === 3) {
        list = this.allGoodsSelectList
      }
      return JSON.parse(JSON.stringify(list))
    },
    //已经选择了的货品不能再选
    disableGoodsSelect() {
      let list = []
      this.order.formationListTemp.map(x => {
        if (x.formation) {
          list.push(x.formation.id)
        }
      })
      return list
    },
    // 弹窗的title
    dialogTitle() {
      if (this.order.orderType === 1) {
        return '销售发货出库'
      } else if (this.order.orderType === 2) {
        return '生产领料出库'
      } else if (this.order.orderType === 3) {
        return '采购退货出库'
      } else if (this.order.orderType === 4) {
        return '返厂维修出库'
      }
      return '出库'
    },
    // 弹窗的title
    orderTitle() {
      if (this.order.orderType === 1 || this.order.orderType === 4) {
        return '销售订单'
      } else if (this.order.orderType === 2) {
        return '生产计划'
      } else if (this.order.orderType === 3) {
        return '采购合同'
      }
      return ''
    },
  },
  methods: {
    dataChange(val) {
      var cTime = new Date(val).getTime();//转化为时间戳
      this.toTime=cTime
      // str.subString(0,10);

    },

    printOrder() {
      this.$nextTick(() => {
        this.$refs.printForms.CreateOneFormPage()
      })
    },
    //货品选中项处理方法
    goodsSelectHandel() {
      let formationListTemp = []
      //处理货品组成数据，用于回显
      this.order.goodsList.map(x => {
        this.goodsSelectList.map(y => {
          if (x.goodsId === y.id) {
            let temp = JSON.parse(JSON.stringify(y))
            temp.formationNumber = x.goodsNumber
            formationListTemp.push({formation: temp})
          }
        })
      })
      this.order.formationListTemp = formationListTemp
    },
    //打印单据
    orderPrint(row, orderHeaderName) {
      this.order={}
      this.order = JSON.parse(JSON.stringify(row))
      this.order.isLook = true
      this.order.parentOrderId = row.parentOrderId ? row.parentOrderId : ''
      this.goodsSelectHandel()
      this.isShowPrintDialog = true
      this.orderHeaderName = orderHeaderName
      //如果选了订单，处理可入库数量回显
      if (this.order.parentOrderId) {
        this.initOrderSelectList(true)
      } else {
        this.printHandel(true)
      }
    },
    //编辑确认出库单
    handleEdit(row, isLook, isConfirm) {
      this.order = JSON.parse(JSON.stringify(row))
      this.order.isLook = isLook
      this.order.isConfirm = isConfirm
      this.order.parentOrderId = row.parentOrderId ? row.parentOrderId : ''
      this.goodsSelectHandel()
      this.isShowAddDialog = true
      //如果选了订单，处理可入库数量回显
      if (this.order.parentOrderId) {
        this.initOrderSelectList()
      }
      //出库单确认
      if (isConfirm) {
        this.order.toUserName = this.user.userName
        this.orderConfirm = {
          explanation: isLook ? row.rejectExplanation : '',
          id: row.id,
          orderStatus: row.orderStatus > 2 ? row.orderStatus : 3
        }
      }
      this.$nextTick(() => {
        this.$refs.order.clearValidate()
      })
    },
    // 打印弹窗表格布局和数据处理方法
    printHandel(isShowPrintDialog = false) {
      if (!isShowPrintDialog) {
        return
      }
      let time = Format(new Date(this.order.toTime), 'yyyy-MM-dd')
      let tableHeader = []
      let header = [
        {title: '出库日期', value: time, style: 'table_header_100'},
        {title: '出库类型', value: this.order.orderTypeName, style: 'table_header_100'},
        {title: '项目名称', value: this.order.projectName, style: 'table_header_50'},
        {title: '购货单位', value: this.order.companyName, style: 'table_header_50'},
        {title: '收货联系人', value: this.order.consigneeName, style: 'table_header_40'},
        {title: '销售单号', value: this.order.parentOrderNo, style: 'table_header_50'},
        {title: '收货人电话', value: this.order.consigneePhone, style: 'table_header_40'},
        {title: '收货地址', value: this.order.address, style: 'table_header_arr'},
      ]
      //表格头处理，有顺序
      if (this.orderHeaderName === '出库单') {
        tableHeader = [
          {title: '序号', width: '30'},
          {title: '产品名称', width: '150'},
          {title: '规格', width: '50'},
          {title: '数量', width: '30'},
          {title: '单位', width: '30'},
          {title: '货架', width: ''},
          {title: '货位', width: ''},
          {title: '备注', width: ''},
        ]
      } else if (this.orderHeaderName === '发货单') {
        tableHeader = [
          {title: '序号', width: '30'},
          {title: '产品名称', width: '150'},
          {title: '规格', width: '50'},
          {title: '数量', width: '30'},
          {title: '单位', width: '30'},
          {title: '备注', width: ''},
        ]
      }
      let table = this.order.formationListTemp
      let tableData = []
      //表格td内容处理，顺序和表头对应
      table.map(x => {
        let tableArray = []
        tableArray.push(x.formation.name)
        tableArray.push(x.formation.specifications)
        tableArray.push(x.formation.formationNumber)
        tableArray.push(x.formation.unitName)
        if (this.orderHeaderName === '出库单') {//出库单才展示货架和货位
          tableArray.push(x.formation.shelvesName)
          tableArray.push(x.formation.goodsAllocationName)
        }
        tableData.push(tableArray)
      })
      //订单头部和尾部处理
      var nameObject = {}
      if (this.order.orderType === 1 || this.order.orderType === 4) {
        if (this.orderHeaderName === '出库单') {//出库单才展示货架和货位
          nameObject = {title: '出库人签字', value: ''}
        } else {
          nameObject = {title: '收货人签字', value: ''}
        }
      } else if (this.order.orderType === 2) {
        nameObject = {title: '领料人签字', value: ''}
        header = [
          {title: '出库日期', value: time, style: 'table_header_100'},
          {title: '领料人员', value: this.order.fromUserName, style: 'table_header_100'},
          {title: '出库类型', value: this.order.orderTypeName, style: 'table_header_100'},
        ]
      } else if (this.order.orderType == 3) {
        nameObject = {title: '退货人签字', value: ''}
        header = [
          {title: '出库日期', value: time, style: 'table_header_100'},
          {title: '供应公司', value: this.order.companyName, style: 'table_header_50'},
          {title: '收货联系人', value: this.order.consigneeName, style: 'table_header_40'},
          {title: '出库类型', value: this.order.orderTypeName, style: 'table_header_50'},
          {title: '收货人电话', value: this.order.consigneePhone, style: 'table_header_40'},
          {title: '采购单号', value: this.order.parentOrderNo, style: 'table_header_50'},
          {title: '收货地址', value: this.order.address, style: 'table_header_arr'},
        ]
      }
      let footer = [
        {title: '仓库管理员', value: this.order.toUserName},
        {title: '制单员', value: this.order.fromUserName},
        nameObject
      ]
      this.$nextTick(() => {
        this.order.explanation = ''
        this.$refs.printForms.getData(header, tableHeader, tableData, footer, this.orderHeaderName, this.order)
      })
    },
    //有关联订单的货品处理方法
    async initOrderSelectList(isShowPrintDialog = false) {
      let res = await getOutOrderSelectList({outOrderType: this.order.orderType, id: this.order.parentOrderId})
      this.orderList = res.data || []
      //处理货品组成数据，用于回显
      let goodsList = []
      this.orderList.map(x => {
        x.orderList.map(y => {
          if (y.id === this.order.parentOrderId) {
            goodsList = y.goodsList
            this.order.companyName = y.companyName
            this.order.parentOrderNo = y.orderNo
            this.order.projectName = y.projectName
            this.order.userName = y.userName
          }
        })
      })
      let formationListTemp = []
      goodsList.map(x => {
        this.order.formationListTemp.map(y => {
          if (x.id === y.formation.id) {
            y.formation.maxNumber = x.num
            formationListTemp.push(y)
          }
        })
      })
      this.order.formationListTemp = formationListTemp
      this.printHandel(isShowPrintDialog)
    },
    changeOrder() {
      //todo 选择订单后更新货品列表
      let formationListTemp = []
      //处理货品组成数据，用于回显
      let goodsList = []
      this.orderList.map(x => {
        x.orderList.map(y => {
          if (y.id === this.order.parentOrderId) {
            goodsList = y.goodsList
            this.order.companyName = y.companyName
            this.order.projectName = y.projectName
            this.order.userName = y.userName
          }
        })
      })
      goodsList.map(x => {
        this.goodsSelectList.map(y => {
          if (x.id === y.id) {
            let temp = JSON.parse(JSON.stringify(y))
            temp.maxNumber = x.num
            temp.formationNumber = x.num
            formationListTemp.push({formation: temp})
          }
        })
      })
      this.order.formationListTemp = JSON.parse(JSON.stringify(formationListTemp))
    },
    async getOrderSelectList() {
      this.order.parentOrderId = ''
      this.order.formationListTemp = []
      let res = await getOutOrderSelectList({outOrderType: this.order.orderType})
      this.orderList = res.data || []
    },
    //删除一个货品
    handleDeleteImg(index) {
      this.order.formationListTemp.splice(index, 1);
    },
    //添加一个货品
    addGoodsCompose() {
      this.order.formationListTemp.push({})
    },
    // 表单提交
    validateAddForm() {
      //如果是查看，且不是出库确认直接关闭弹窗
      if (this.isLook && !this.order.isConfirm) {
        this.isShowAddDialog = false
        return
      }
      if ((this.order.orderType === 1 || this.order.orderType === 4) && !this.order.parentOrderId) {
        this.$message({
          message: '提示：' + this.dialogTitle + '必须选择一个销售订单！',
          type: 'warning'
        });
        return
      }
      this.$refs.order.validate((valid) => {
        if (valid) {
          this.submitOrder()
        }
      })
    },
    async submitOrder() {
      let goodsList = []
      //处理货品组成数据
      this.order.formationListTemp.map(x => {
        goodsList.push({
          goodsId: x.formation.id,
          goodsNumber: x.formation.formationNumber,
        })
      })
      this.order.goodsList = goodsList
      let form = this.order
      form.toTime=this.toTime
      let action = this.order.id ? updateOutOrder : addOutOrder
      if (this.order.isConfirm) {
        action = confirmOutOrder
        form = this.orderConfirm
      }
      let res = await action(form)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.order.id ? '更新成功' : '添加成功！'
        })
        this.isShowAddDialog = false
        this.order.formationListTemp = []
        this.queryList()
      }
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      let timerArray = this.timerArray || []
      this.form.startToTime = timerArray[0]
      this.form.endToTime = timerArray[1]
      let res = await getOutOrderList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    addOrder() {
      this.isShowAddDialog = true
      this.order = {
        formationListTemp: [],
        orderType: 1,
        parentOrderId: '',
        fromUserName: this.user.userName
      }
      //查询相应订单
      this.getOrderSelectList()
      this.$nextTick(() => {
        this.$refs.order.clearValidate()
      })
    },

  },
  mounted() {
    this.queryDictList(['EnumOutOrderType', 'EnumOutOrderStatus'], ['EnumOutOrderTypeList', 'EnumOutOrderStatusList'])
    this.queryList()
  },
  activated() {
    this.getAllGoodsSelectList()
    this.getAllCompanyList()
  }

}
</script>

<style lang="less" scoped>
  .demo-drawer__content::-webkit-scrollbar {
    width: 0px;
    height: 0px;

  }

  //滚动条的滑块
  .demo-drawer__content::-webkit-scrollbar-thumb {
    background-color: #1990FE;
    border-radius: 0px;

  }

  .goods_compose_class {
    padding: 20px;

    /deep/ .el-table th {
      padding: 5px 0;
    }

    /deep/ .el-table td {
      padding: 5px 0;

      .el-input-number {
        width: 120px;
      }

      .el-input-number__decrease, .el-input-number__increase {
        width: 30px;
      }
    }
  }


  .el-divider__text {
    font-size: 20px;
  }

  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }

  /deep/ .el-input-group__prepend {
    border-right: 0;
    background: #2196f3;
    color: white;
  }
</style>
